<template>
  <div>
    <!-- 搜索插槽 -->
    <div
      class="flex_items_center"
      style="flex-wrap: wrap"
      v-if="searchItems[0]"
    >
      <div
        v-for="(item, index) in searchItems"
        :key="index"
        style="margin-right: 15px; margin-bottom: 10px"
        class="flex_center"
      >
        <span>{{ item.name }}：</span>
        <template v-if="item.type == '_selector' && item.options[0]">
          <a-select
            allowClear
            :show-search="item.supportSearch"
            :dropdownMatchSelectWidth="false"
            :style="{
              width:
                item.size == 'long'
                  ? '200px'
                  : item.size == 'middle'
                  ? '120px'
                  : '80px',
            }"
            v-model="searchForm[item.key]"
          >
            <a-select-option
              v-for="(option, index) in item.options"
              :key="index"
              :value="option.value"
              >{{ option.name }}</a-select-option
            >
          </a-select>
        </template>
        <template v-if="item.type == '_input'">
          <a-input
            type="text"
            v-model="searchForm[item.key]"
            :style="{
              width:
                item.size == 'long'
                  ? '160px'
                  : item.size == 'middle'
                  ? '120px'
                  : '80px',
            }"
          />
        </template>
        <template v-if="item.type == '_date'">
          <a-date-picker
            valueFormat="YYYY-MM-DD"
            v-model="searchForm[item.key]"
          ></a-date-picker>
        </template>
        <template v-if="item.type == '_during'">
          <a-date-picker
            valueFormat="YYYY-MM-DD"
            v-model="searchForm[item.key[0]]"
          >
          </a-date-picker
          ><span style="margin: 0 2px">至</span>
          <a-date-picker
            valueFormat="YYYY-MM-DD"
            v-model="searchForm[item.key[1]]"
          ></a-date-picker>
        </template>

        <template v-if="item.type == '_checkgroup'">
          <div
            class="border"
            style="display: inline-block; padding: 5px; border-radius: 5px"
          >
            <a-checkbox-group
              v-model="searchForm[item.key]"
              :options="item.options"
            />
          </div>
        </template>
      </div>
      <a-button type="primary" style="margin-bottom: 10px" @click="toSearch"
        >查询</a-button
      >
    </div>
  </div>
</template>
<script>
export default {
  props: {
    searchForm: Object,
    searchItems: Array,
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    toSearch() {
      this.$emit("doSearch");
    },
  },
};
</script>
